<template>
  <view class="complaint">
    <fui-textarea labelSize="23" size="23" isCounter placeholder="请填写你想反馈的问题，以便我们提供更好的帮助" maxlength="1000" v-model="text"></fui-textarea>
    
    <view class="title">相关截图({{urls.length}}/4)</view>  
    <view class="upload">
          <fui-upload  max="4" :fileList="fileList"  ref="upload" @success="success"  @complete="complete"></fui-upload>
      </view>
    <view class="title">联系方式</view> 
    <fui-input size="25" v-model="contact"  borderTop placeholder="手机号或邮箱"></fui-input>
    <view class="fui-btn__box">
      <fui-button type="gray" width="400rpx" height="84rpx" text="提交" bold @click="startUpload">
      </fui-button>
    </view> 
  </view>
    
</template>

<script setup lang="ts">
import sysCommonService from '@/api/sysCommonService'
import dyComplaintService from "@/api/dyComplaintService";
const text = ref()
const fileList = ref([])
const urls = ref([])
const emojiRegex =
  /[\u{1F300}-\u{1F6FF}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{FE00}-\u{FEFF}\u{1F001}-\u{1F9FF}\u{1F601}-\u{1F64F}\u{1F680}-\u{1F6FF}\u{1F170}-\u{1F251}\u{1F600}-\u{1F636}\u{1F681}-\u{1F6C5}\u{1F30D}-\u{1F567}]/u

const contact =ref()
const success = (e:any) =>{
		console.log(e)
		//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
		let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
		// this.status = e.status
		if (res.data.url) {
			//处理结果返回给组件 
			//data.url为上传成功后返回的图片地址
			//e.index为图片索引值
			// this.$refs.upload.result(res.data.url, e.index)
		}
	}
  // 上传触发
  const complete = (e:any)=> {
		urls.value = e.urls
    // console.log(e)
		// if (this.status === 'success' && e.action === 'upload') {
		// 	this.fui.toast('上传完成！')
		// 	//已上传完成的图片列表 this.urls
		// 	console.log(this.urls)
		// }
	}

  const startUpload = async()=>{
    if(!contact.value || !text.value){
      uni.showToast({
          title: '请填写相关信息',
          icon: 'none',
          mask: true,
          duration: 1000
        })
        return
    }

    // 上传图片
    let image: Array<string> = [];
    for (const a of urls.value) {
      await updateImage(a,image)
    }
    let imageString: string = image.join(',');

    const {success} = await dyComplaintService.addComplaint({
      content:text.value,
      contactType:contact.value,
      images:imageString
    })
    if(success){
      uni.showToast({
          title: '提交成功',
          icon: 'none',
          mask: true,
          duration: 1000,
          complete: () => {
            setTimeout(() => {
              uni.reLaunch({
                url: `/pages/user/user`,
              })
            }, 1000)
          },
        })
    }

  }

/**
 * 对图片进行上传
 */
 const updateImage = async (imagePath: string,image:Array<string>) => {
  const {success,result} = await sysCommonService.upload({
      filePath: imagePath,
      formData: {
        compresType: '1',
        quality: '1',
      },
    })
    if(success){
      console.log(result)
      image.push(result[0])
    }
}

</script>

<style lang="scss" scoped>
.complaint{
    padding: 28rpx;
    .title{
      font-size: 28rpx;
      margin: 28rpx 0;
    }
    .upload{
      margin-left: 28rpx;
    }
    .fui-btn__box{
     display: flex;
     justify-content: center;
     margin-top: 32rpx;
    }
}

</style>
